<template>
  <section id="contact" class="section">
    <div class="container-full">
      <h2 class="section-title fade-in">联系我</h2>
      <div class="contact-content">
        <div class="contact-info card fade-in">
          <h3 class="contact-subtitle">联系方式</h3>
          <div class="contact-methods">
            <a
              v-for="contact in contactMethods"
              :key="contact.type"
              :href="contact.link"
              class="contact-method"
              target="_blank"
            >
              <div class="contact-icon">{{ contact.icon }}</div>
              <div class="contact-details">
                <span class="contact-label">{{ contact.type }}</span>
                <span class="contact-value">{{ contact.value }}</span>
              </div>
            </a>
          </div>

          <div class="availability">
            <h4 class="availability-title">
              <span class="status-indicator"></span>
              当前状态
            </h4>
            <p class="availability-text">
              我目前<strong class="glow-text">开放新的机会</strong>，欢迎与我联系讨论合作可能性！
            </p>
          </div>

          <div class="social-section">
            <h4 class="social-title">关注我</h4>
            <div class="social-links">
              <a
                v-for="social in socialLinks"
                :key="social.platform"
                :href="social.url"
                target="_blank"
                class="social-link"
              >
                <span class="social-icon">{{ social.icon }}</span>
                <span class="social-name">{{ social.platform }}</span>
              </a>
            </div>
          </div>
        </div>

        <div class="contact-form card fade-in">
          <h3 class="contact-subtitle">发送消息</h3>
          <form @submit.prevent="submitForm">
            <div class="form-group">
              <label for="name">姓名</label>
              <input
                id="name"
                v-model="form.name"
                type="text"
                required
                placeholder="请输入您的姓名"
              />
            </div>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input
                id="email"
                v-model="form.email"
                type="email"
                required
                placeholder="your@email.com"
              />
            </div>
            <div class="form-group">
              <label for="subject">主题</label>
              <input
                id="subject"
                v-model="form.subject"
                type="text"
                required
                placeholder="请输入消息主题"
              />
            </div>
            <div class="form-group">
              <label for="message">消息</label>
              <textarea
                id="message"
                v-model="form.message"
                required
                placeholder="请输入您的消息..."
                rows="6"
              ></textarea>
            </div>
            <button type="submit" class="btn submit-btn" :disabled="isSubmitting">
              <span>{{ isSubmitting ? '发送中...' : '发送消息' }}</span>
            </button>
          </form>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'

const isSubmitting = ref(false)
const form = ref({
  name: '',
  email: '',
  subject: '',
  message: ''
})

const contactMethods = [
  {
    type: '邮箱',
    value: 'your.email@example.com',
    icon: '📧',
    link: 'mailto:your.email@example.com'
  },
  {
    type: '电话',
    value: '+86 138 0000 0000',
    icon: '📱',
    link: 'tel:+8613800000000'
  },
  {
    type: '地址',
    value: '中国 · 北京',
    icon: '📍',
    link: '#'
  }
]

const socialLinks = [
  {
    platform: 'GitHub',
    icon: '🐙',
    url: 'https://github.com'
  },
  {
    platform: 'LinkedIn',
    icon: '💼',
    url: 'https://linkedin.com'
  },
  {
    platform: '知乎',
    icon: '📖',
    url: 'https://zhihu.com'
  },
  {
    platform: '微博',
    icon: '🐦',
    url: 'https://weibo.com'
  }
]

const submitForm = async () => {
  isSubmitting.value = true

  await new Promise(resolve => setTimeout(resolve, 1500))

  alert('消息发送成功！我会尽快回复您。')

  form.value = {
    name: '',
    email: '',
    subject: '',
    message: ''
  }

  isSubmitting.value = false
}
</script>

<style scoped>
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 2.5rem;
}

.contact-subtitle {
  font-size: 1.5rem;
  color: var(--accent-blue);
  margin-bottom: 2rem;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
}

.contact-method {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s;
}

.contact-method:hover {
  border-color: var(--accent-blue);
  background: rgba(0, 217, 255, 0.05);
  transform: translateX(5px);
}

.contact-icon {
  font-size: 2rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 217, 255, 0.1);
  border-radius: 50%;
  border: 2px solid var(--accent-blue);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contact-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.contact-value {
  color: var(--text-primary);
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

.availability {
  padding: 1.5rem;
  background: rgba(0, 217, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 2rem;
}

.availability-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.status-indicator {
  width: 12px;
  height: 12px;
  background: #00ff00;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
  animation: pulse 2s infinite;
}

.availability-text {
  color: var(--text-secondary);
  line-height: 1.6;
}

.social-section {
  margin-top: 2rem;
}

.social-title {
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary);
  transition: all 0.3s;
}

.social-link:hover {
  border-color: var(--accent-blue);
  background: rgba(0, 217, 255, 0.1);
  transform: translateY(-3px);
}

.social-icon {
  font-size: 1.5rem;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.form-group input,
.form-group textarea {
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.submit-btn {
  margin-top: 1rem;
  align-self: flex-start;
  position: relative;
  z-index: 1;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.submit-btn:disabled:hover {
  border-color: var(--accent-blue);
  box-shadow: none;
}

.submit-btn:disabled:hover::before {
  left: -100%;
}

@media (max-width: 768px) {
  .contact-content {
    grid-template-columns: 1fr;
  }

  .contact-form {
    order: -1;
  }
}
</style>
